<style rel="stylesheet/scss" lang="scss" scoped>
    .f-cation {
        flex: 1;
        display: flex;
        height: 70%;
        margin: 0 5px;
        padding: 0 5px 0;
        border: 1px solid #e5e5e5;
        flex-direction: column;
        margin-top: 10px;
        
        .f-cation_btn {
            width: 100%;
            height: 30px;
            color: #fff;
            display: flex;
            line-height: 30px;
            padding-left: 10px;
            cursor: pointer;
            background: #409EFF;
            span {
                flex: 1;
                text-align: center;
            }
        }
        .f-cation_info {
            width: 100%;
            flex: 1;
            flex-direction: column;
            overflow: auto;
            display: block;
            -webkit-padding-start: 0px;
            .info-item {
                width: 100%;
                height: 40px;
                display: flex;
                line-height: 40px;
                border-bottom: 1px solid #e5e5e5;
				cursor: pointer;		
                .info-item_div {
                    flex: 1;
                    display: flex;
                    justify-content: flex-end;
                    align-items: flex-end;
                    >span {
                        cursor: pointer;
                    }
                    .text-s {
                        color: #409EFF;
                        margin: 0 10px;
                    }
                }
                i {
                    margin-top: 10px;
                    margin-right: 5px;
                }
            }
			.current{
				background: #f0f0f0;
			}
        }
        .box-flex{
        	display: flex;
        	justify-content: center;
        }
    }
</style>
<template>
    <div class="f-cation">
        <p class="f-cation_btn text-14">
            <font  @click="addCartFn" >新增+</font>
            <span>一级分类</span>
        </p>
        <el-input placeholder="请输入内容" prefix-icon="el-icon-search" clearable v-model="keyWord" size="mini"></el-input>
        <ul class="f-cation_info" v-if="list && list.length>0">
            <li class="info-item" v-for="(item, index) in list" :class="{'current': currentIndex == index}" @click="selectItem(item, index)">
                <span>{{item.categoryName}}</span>
                <div class="info-item_div">
                    <span class="text-s text-14" @click.stop.prevent="editFn(item)">编辑</span>
                    <span class="text-red text-14" @click.stop.prevent="deleteFn(item)">删除</span>
                </div>
                <i class="el-icon-arrow-right"></i>
            </li>
        </ul>
        <el-dialog :title="title" :visible.sync="centerDialogVisible" width="30%" center>
            <el-row class="p-all-20 box-flex">
                <el-col :span="20" class="box-flex m-b-10">
                    <el-input  placeholder="请输入一级品类名称" v-model="leaveName" maxLength="10"/>
                </el-col>
               
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdmin">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
	import { SUCCESS_REQUEST_STATUS } from '@/utils/config.js'
    export default {
        props: {
            leveFirstList: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                list: [],
				catId: '',
				keyWord:'',
				title: '新建一级分类',
				currentIndex:0,
				leaveName: '',
				centerDialogVisible: false
            }
        },
		methods: {
			selectItem(item, index) {
				this.currentIndex = index
				this.$emit('selectFirstItem',item.id)
			},
			addCartFn() {
				this.title = "新建一级分类"
				this.catId = ''
				this.leaveName = ''
				this.centerDialogVisible = true
			},
			editFn(item) {
				this.title = '编辑一级分类'
				this.leaveName = item.categoryName
				this.catId = item.id
				this.centerDialogVisible = true
			},
			deleteFn(item) {
				this.$confirm("删除一级品类?", "确定删除此品类", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$delete({
						url: `category/${item.id}`,
						callback: res => {
							console.log(res)
							if(res.status === 200) {
								this.$message({
									type:'success',
									message:' 删除成功'
								})
								this.$emit('addFLeave')
							} else {
								this.$message({
									type:'error',
									message: res.msg
								})
							}
						}
					})
				})
			},
			saveAdmin() {
				if(!this.leaveName){
					this.$message({
						type: 'error',
						message: '品类不能为空'
					})
					return
				}
				!this.catId ? this.addCategoryFn() :  this.editCategoryFn()
			},
			editCategoryFn() {
				this.$put({
					url:'category/',
					data: {
						id: this.catId,
						categoryName: this.leaveName
					},
					callback: res => {
						if(res.status === 200) {
							this.$message({
								type: 'success',
								message: '编辑成功'
							})
							this.$emit('addFLeave')
						}else {
							this.$message({
								message: res.msg,
								type: 'error'
							})
						}
						this.centerDialogVisible = false
					}
				})
			},
			addCategoryFn() {
				this.$post({
					url:'category/',
					data: {
						parentId: 0,
						categoryName: this.leaveName
					},
					callback: res => {
						console.log(res)
						if(res.status === 200) {
							this.$message({
								type: 'success',
								message: '添加成功'
							})
							this.$emit('addFLeave')
						}else {
							this.$message({
								message: '添加失败',
								type: 'error'
							})
						}
					
						this.centerDialogVisible = false
					}
				})
			},
		},
		
        created() {
            this.list = this.leveFirstList
        },
		watch: {
			leveFirstList(val) {
				this.list = val
			},
			keyWord(val) {
				this.$emit('searchFirst' ,val)
			}
		}
    }
</script>
